import React,{Fragment} from "react";
// import Header from "./include/header";
import Bottom from "./include/bottom";
import {List, Dialog, Toast,NavBar} from "antd-mobile";
import {Link} from "react-router-dom";

/*
我的
 */
class App extends React.Component {


    constructor(props) {
        super(props);

        this.state = {
            member: this.getMember()
        }

    }

    //从sessionStorage获取用户信息
    getMember(){
        if (sessionStorage.getItem("member") !== null) {
            return JSON.parse(sessionStorage.getItem("member"));
        } else {
            return null;
        }
    }

    //登出登录
    logout(){
        sessionStorage.removeItem("member");
        this.setState({
            member: null
        })
    }

    render() {
        return (
            <div className={"mineApp"}>
                <NavBar >我的</NavBar>
                <div className={"middle"}>
                    <div className={"mineInfo"}>
                        {/* <img src={require("../asset/image/defaultFace.jpg").default} alt={""}/> */}
                        {this.state.member === null ?
                            <Fragment>
                                <Link to={"/mine/login"}>登录</Link>
                                <Link to={"/mine/register"}>注册</Link>
                            </Fragment>:
                            <span>
                                {this.state.member.account}
                            </span>}
                    </div>
                    <List>
                        <List.Item onClick={() => {
                            Toast.show("正在开发中...");
                        }}>
                            我的订单
                        </List.Item>
                        <List.Item onClick={() => {}}>
                            我的收藏
                        </List.Item>
                        <List.Item onClick={() => {}}>
                            浏览记录
                        </List.Item>
                    </List>
                    <br/>
                    <List>
                        <List.Item onClick={() => {}}>
                            安全设置
                        </List.Item>
                        <List.Item onClick={() => {}}>
                            客服中心
                        </List.Item>
                    </List>
                    {this.state.member !== null ?
                        <Fragment>
                    <br/>
                    <List>
                        <List.Item onClick={async () => {
                            const result = await Dialog.confirm({
                                content: '确定退出吗？',
                            })
                            if (result) {
                                this.logout();
                            }
                        }}>
                            退出登录
                        </List.Item>
                    </List>
                        </Fragment>:null}
                </div>
                <Bottom history={this.props.history}
                        onRef={(ref)=>{
                            this.Bottom = ref
                        }}/>
            </div>
        )
    }

}

export default App;
